<template>
	<div ref="threejs"></div>
</template>

<script>
	import * as THREE from 'three';
	import {
		GLTFLoader
	} from 'three/examples/jsm/loaders/GLTFLoader';
	import {
		OrbitControls
	} from "three/examples/jsm/controls/OrbitControls";
	import {
		TextGeometry
	} from "three/examples/jsm/geometries/TextGeometry";
	import {
		FontLoader
	} from "three/examples/jsm/loaders/FontLoader";

	let laberDiv = null; //  DoM属性
	let scene = null;
	let camera = null;
	let renderer = null;
	let controls = null;
	export default {
		name: 'ThreeDModel',
		data: {
			return: {
				css3DRenderer: null
			}
		},
		mounted() {
			this.initThreeJS();
		},
		methods: {

			initThreeJS() {
				const width = this.$refs.threejs.clientWidth;
				const height = this.$refs.threejs.clientHeight;

				// 创建场景、相机和渲染器
				scene = new THREE.Scene();
				camera = new THREE.PerspectiveCamera(75, width / height, 0.1, 1000);
				renderer = new THREE.WebGLRenderer();
				renderer.shadowMap.enabled = true;

				renderer.setSize(width, height);
				this.$refs.threejs.appendChild(renderer.domElement);
				renderer.setClearAlpha(0); // 设置背景透明度为0
				renderer.domElement.style.background = 'transparent'; // 设置容器背景透明
				renderer.domElement.style.position = 'absolute'; // 确保容器是绝对定位，以便透明背景正常工作
				renderer.domElement.style.top = '0'; // 根据需要调整位置和大小
				renderer.domElement.style.left = '0'; // 根据需要调整位置和大小
				renderer.domElement.style.width = '100%'; // 根据需要调整位置和大小
				renderer.domElement.style.height = '100%'; // 根据需要调整位置和大小
				renderer.domElement.style.zIndex = '10'; // 确保在页面其他元素之下显示（如果需要）
				renderer.autoClear = false; // 不自动清除背景，以便可以设置透明背景色
				renderer.setClearColor(0x000000, 0); // 设置背景颜色为黑色，但透明度为0（实际上不显示颜色）
				renderer.clear(); // 清除之前的任何渲染结果（如果有的话）
				renderer.setPixelRatio(window.devicePixelRatio); // 设置高清显示

				// 添加光源
				const ambientLight = new THREE.AmbientLight(0xFFF2D9, 1); // 环境光
				scene.add(ambientLight);
				const light = new THREE.DirectionalLight(0xEDF9FF, 2);
				light.position.set(-6, 16, 13);
				light.castShadow = true; // 启用阴影投射
				// 设置光源的阴影属性

				scene.add(light);

				// 加载3D模型
				const loader = new GLTFLoader();
				loader.load('https://demo-1254184403.cos.ap-chengdu.myqcloud.com/20250306-2.glb', (gltf) => {
					const model = gltf.scene;
					model.traverse((obj) => {
						//console.log(obj)
						if (obj.isMesh) {
							obj.material.emissive = obj.material.color;
							obj.material.emissiveMap = obj.material.map;
						}
						if (obj.name.includes("平面")) {
							obj.receiveShadow = true
						} else {
							//if(obj.name.includes('底座'))obj.visible = false
							if (obj.castShadow !== undefined) {
								// 开启投射影响
								obj.castShadow = true;
							}
						}
					});

					model.scale.set(2.2, 2.2, 1.8);
					scene.add(model);
					model.rotation.x = 0; // 初始旋转角度
					model.rotation.y = 0; // 初始旋转角度
					model.rotation.z = 0; // 初始旋转角度

					camera.position.x = -1;
					camera.position.y = 2;
					camera.position.z = 5;
				}, undefined, (error) => {
					console.error('An error happened', error);
				});
				//this.createDom()

				// 添加鼠标控制旋转功能
				controls = new OrbitControls(camera, renderer.domElement);
				controls.enableDamping =
					true; // an animation loop is required when either damping or auto-rotation are enabled
				controls.dampingFactor = 0.25;
				controls.screenSpacePanning = false;
				controls.minDistance = 10;
				controls.maxDistance = 500;
				controls.maxPolarAngle = Math.PI / 2; // Prevents the camera from rotating upside-down (π/2 radians)
				controls.addEventListener("change", () => {
					renderer.render(scene, camera);
				});
				window.addEventListener('resize', this.onWindowResize);

				this.animate();
			},

			createDom() {
				const fontLoader = new FontLoader();
				//注意这里用到的json 现在文字字体然后在网上在线直接转成json
				fontLoader.load('fonts/ziti.json', function(font) {
					//创建材质 就是控制字体颜色其实
					const textMaterial = new THREE.MeshBasicMaterial({
						color: '#00ff00'
					});
					// 创建文字几何体
					const textGeometry = new TextGeometry('贴图文字', {
						font: font,
						size: 1,
						height: 0.2,
						curveSegments: 12,
						bevelEnabled: true,
						bevelThickness: 0.1,
						bevelSize: 0.1,
						bevelOffset: 0,
						bevelSegments: 5
					});
					
					const mesh123 = new THREE.Mesh(textGeometry, textMaterial);
					mesh123.position.x = 0
					mesh123.position.y = 0
					mesh123.position.z = 0
					//mesh123.name = 'mesh123Text'
					//mesh123.rotation.x = -Math.PI / 2
					scene.add(mesh123);
				})
				
			},


			animate() {
				requestAnimationFrame(this.animate);
				renderer.render(scene, camera);
				controls.update(); // required if controls.enableDamping = true, or if controls.autoRotate = true
				//this.css3DRenderer.render(scene, camera);
			},

			onWindowResize(camera, renderer) {
				camera.aspect = window.innerWidth / window.innerHeight;
				//camera.updateProjectionMatrix();

				renderer.setSize(window.innerWidth, window.innerHeight);
				render();
			}

		}
	}
</script>

<style scoped>
	div {
		width: 100%;
		height: 100%;
		background: transparent;
		/* 根据需要调整大小 */
	}

	<style>.aline {
		height: 500px;
		background: red !important;
		width: 10px !important;
		/* 设置线的宽度为 10px */
		background-color: #ff0000 !important;
		/* 设置线的背景色为红色 */
	}

	.workshop-textA {
		background: red !important;
		/* height: 50px !important; */
		display: block;
	}

	.workshop-text .fufachejian {
		height: 20px;
		width: 60px;
		color: #fff;

		background-size: 100%;
		background-repeat: no-repeat;
	}

	.workshop-text .bangonglou {
		height: 20px;
		width: 60px;

		background-size: 100%;
		background-repeat: no-repeat;
	}

	.workshop-text .qiye {
		height: 20px;
		width: 60px;

		background-size: 100%;
		background-repeat: no-repeat;
	}

	.workshop-text p {
		font-size: 0.9rem;
		font-weight: bold;
		padding: 10px;
		color: #0ff;
	}

	#tag {
		padding: 0px 10px;
		border: #00ffff solid 1px;
		height: 40px;
		border-radius: 5px;
		width: 65px;
	}

	.taga {
		display: block;
		widows: 50px;
		height: 50px;
		background: red;
	}

	.taga p {
		height: 50px;
		width: 50px;
		background: red;
	}
</style>
</style>